<template>
  <div class="countryChoose_wrap">
    <headTop :headClass="'white_header'">
      Country choice
    </headTop>
    <div class="scroll_wrap">
      <p class="now_txt">Currently selected regions/address: <span class="area">{{area}}</span></p>
      <ul class="area_list">
        <li class="area_item" @click="selectArea(index)" v-for="(item, index) in areaList" :key="index">
          <span class="item_left">{{item}}</span>
          <span class="iconfont" :class="{'icon-weixuanzhong' : select !== index, 'icon-xuanzhong1' : select === index}"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'countryChoose',
  data () {
    return {
      area: 'China[CNY]',
      select: 0,
      areaList: [
        'China[CNY]',
        'U.S.A[USD]',
        'Hongkong[HKD]',
        'Japan[JPY]',
        'Britain[EUR]',
        'France[FRF]',
        'Canada[CAD]',
        'Switzerland[CHF]',
        'Australia[AUD]'
      ]
    };
  },
  computed: {
  },
  methods: {
    selectArea (num) {
      this.select = num;
      this.area = this.areaList[num];
      // State of deposit
      localStorage.setItem('area', JSON.stringify({area: this.area}));
      // Storage index value
      localStorage.setItem('ind', this.areaList.indexOf(this.area));
      this.$router.go(-1);
    }
  },
  mounted () {
    let area = localStorage.getItem('area');
    if (area) {
      area = JSON.parse(area);
      this.area = area.area;
      this.select = this.areaList.indexOf(this.area);
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .countryChoose_wrap{
    padding-top: 90px;
    height: 100%;
    background: #f4f5f7;
    .scroll_wrap {
      height: 100%;
      overflow-y: scroll;
      .now_txt {
        height: 86px;
        line-height: 86px;
        font-size: 26px;
        color: #666666;
        padding: 0 30px;
        .area {
          color: #ff9e27;
        }
      }
      .area_list {
        background: #fff;
        .area_item {
          height: 108px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;
          border-bottom: 1Px solid #e6e6e6;
          .icon-weixuanzhong {
            color: #a5a5a5;
          }
          .icon-xuanzhong1 {
            color: #ffb117;
          }
        }
      }
    }
  }
</style>
